<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>fetch RestFull</title>
  </head>
  <body>
    <script>
      //1. get参数的传递,传统的URL的形式
      fetch("http://localhost:3000/books?id=1001")
        .then(function (response) {
          return response.text();
        })
        .then(function (data) {
          console.log(data);
        });

      //2. get参数的传递,restful的传参形式
      fetch("http://localhost:3000/books/1002")
        .then(function (response) {
          return response.text();
        })
        .then(function (data) {
          console.log(data);
        });

      //3. delete参数的传递,restful的传参形式
      fetch("http://localhost:3000/books/1003", {
        method: "delete",
      })
        .then(function (response) {
          return response.text();
        })
        .then(function (data) {
          console.log(data);
        });

      //4. post参数的传递
      fetch("http://localhost:3000/books", {
        method: "post",
        body: "uname=haoren&&pwd=250",
        headers: {
          "content-type": "application/x-www-form-urlencoded",
        },
      })
        .then(function (response) {
          return response.text();
        })
        .then(function (data) {
          console.log(data);
        });

        //5. post参数的传递,采用json的格式
      fetch("http://localhost:3000/books", {
        method: "post",
        body: JSON.stringify({uname:'batman',pwd:'222'}),
        headers: {
          "content-type": "application/json",
        },
      })
        .then(function (response) {
          return response.text();
        })
        .then(function (data) {
          console.log(data);
        });

        //6. put参数的传递,采用json的格式
      fetch("http://localhost:3000/books/1004", {
        method: "put",
        body: JSON.stringify({uname:'java入门',pwd:'1223'}),
        headers: {
          "content-type": "application/json",
        },
      })
        .then(function (response) {
          return response.text();
        })
        .then(function (data) {
          console.log(data);
        });
    </script>
  </body>
</html>
